<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
      <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
              <a-col :span="24" v-if="showEdit">
                <a-form-model-item label="菜单类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-radio-group v-model="radioValue" @change="changeRadio" :default-value="1">
                    <a-radio :value="1">一级菜单</a-radio>
                    <a-radio :value="2">子菜单</a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="showEdit">
                <a-form-model-item label="材料种类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialType">
                  <a-radio-group button-style="solid" v-model="model.materialType" @change="change">
                    <a-radio-button :value="1">主材</a-radio-button>
                    <a-radio-button :value="2">辅材</a-radio-button>
                    <a-radio-button :value="3">赠品</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="24" v-if="showEdit && radioValue == 2">
                <a-form-model-item label="上级名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="parentId">
                  <a-tree-select
                    v-model="model.parentId"
                    style="width: 100%"
                    :tree-data="treeData"
                    :replaceFields="replaceFields"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="材料类型名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialTypeName">
                  <a-input v-model="model.materialTypeName" placeholder="请输入材料类型名称"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                  <a-textarea
                    v-model="model.remark"
                    placeholder="请输入描述"
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </a-spin>
  </j-modal>
</template>
<script>
  import { httpAction, getAction } from '@/api/manage'
  export default {
    name: 'GhSupplychainMaterialTypeForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        title:'',
        width: 800,
        visible: false,
        disableSubmit: false,
        model:{},
        parentId: '',
        materialType: '',
        showEdit: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        radioValue: 1,
        treeData: [],
        replaceFields: {
          key: 'id',
          title: 'materialTypeName',
          value: 'id',
          children: 'children'
        },
        confirmLoading: false,
        validatorRules: {
          materialTypeName:[
            { required: true, message: '材料类型名称不能为空' }
          ],
          materialType:[
            { required: true, message: '请选择材料种类' }
          ],
          parentId: [
            { required: true, message: '请选择上级菜单'}
          ]
        },
        url: {
          list: "/ghSupplychainMaterialType/list",
          add: "/ghSupplychainMaterialType/add",
          edit: "/ghSupplychainMaterialType/edit",
          queryById: "/ghSupplychainMaterialType/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created() {
    },
    methods: {
      add(parentId, materialType) {
        this.visible = true;
        if(parentId != null && parentId != '') {
          this.$set(this.model, "parentId", parentId);
        }
        this.$set(this.model, "materialType", materialType);
      },
      edit(record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        this.showEdit = true;
        if(record.parentId) {
          this.radioValue = 2;
        } else {
          this.radioValue = 1;
        }
        this.materialType = record.materialType;
        this.parentId = record.parentId;
        this.getTreeData(record.materialType);
      },
      changeRadio(e) {
        this.radioValue = e.target.value;
      },
      change(e) {
        this.getTreeData(e.target.value);
        if(e.target.value !== this.materialType) {
          this.model.parentId = '';
        } else {
          this.model.parentId = this.parentId;
        }
      },
      getTreeData(materialType) {
        getAction(this.url.list, {
          materialType: materialType
        }).then(res => {
          if(res.success) {
            this.treeData = res.result;
          }
        });
      },
      handleOk() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
               method = 'put';
            }

            if(this.model.materialType == 1) {
              this.model.materialTypeClassifyName = "主材";
            } else if(this.model.materialType == 2) {
              this.model.materialTypeClassifyName = "辅材";
            } else if(this.model.materialType == 3) {
              this.model.materialTypeClassifyName = "赠品";
            }

            if(this.radioValue == 1 && this.showEdit) {
              this.$set(this.model, 'parentId', '')
            }

            delete this.model.children
            delete this.model.key
            delete this.model.createBy
            delete this.model.createTime
            httpAction(httpurl, this.model, method)
              .then((res)=>{
              if(res.success){
                this.$message.success(res.message);
                this.$emit('ok');
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.visible = false;
              this.confirmLoading = false;
              this.model = {};
            })
          }
        })
      },
      handleCancel () {
        this.visible = false;
      }
    }
  }
</script>